<%@ page language="java" contentType="text/html;charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@include file="/views/common/include/taglib.jsp"%>
    
    <script type="text/javascript" src="${ctx}/js/lib/jquery.js"></script>
<script type="text/javascript" src="${ctx}/js/lib/jquery.nicescroll.min.js"></script> 
<link type="text/css" rel="stylesheet" href="${ctx}/css/dlifestyle/menustyle.css" />
<style type="text/css">
.unRead{
            float:left;
            /* position: relative; */
            margin-left: 0px;
            margin-top: 0px;
            background-color:#FF8C05;
            color:#FFFFFF;
            width:22px;
            height:22px;
            border-radius:50%;
            text-align:center;
            font-size: 14px; 
            font-family: '微软雅黑';
            line-height:22px;
        }
</style>
<script>

function hideLeftMenu(){
    $(".left_menu,.ce").animate({left:'-200px'}, "fast");
    $("#hide_botton").animate({'margin-left':'0'},"fast",function() {
    	$(this).hide().css("margin-left","158px");
    	$("#show_botton").show();
    });
    $(".main").animate({width:'90%' , "margin-left":"5%"}, 'fast');
    
    //隐藏和显示的时候让footer也移动
    if($(document).height()-4 <= $(window).height()){
    	$("div.footer_company").animate({
    		width:$(window).width(),
    		left:0
    	}, "fast");
    }else{
    	$("div.footer_company").animate({
    		width:$(window).width() * 0.9,//左右两边各有5%的margin
    		left:0
    	}, "fast");
    }
    
}

function showLeftMenu(){
    $(".left_menu,.ce").animate({left:0}, "fast");
    $("#show_botton").animate({'margin-left':'158px'}, "fast",function() {
    	$(this).hide().css("margin-left",0);
    	$("#hide_botton").show();
    });
    
    
    //不同分辨率适配
    if($(window).width() > 1440){
    	$(".main").animate({"width":"83%" , "margin-left":"234px"}, "fast");
    }else if($(window).width() <1200){
    	$(".main").animate({"width":"73%" , "margin-left":"234px"}, "fast");
    }else{
    	$(".main").animate({"width":"78%" , "margin-left":"234px"}, "fast");
    }
    
    $("div.footer_company").animate({
		width:$(window).width() - 289,
		left:234
	}, "fast");
}

if($(window).width() > 1440){
	$(".main").css("width", "83%");
	$(".main").css("margin-left", "234px");
}else if($(window).width() <1200){
	$(".main").css("width", "73%");
	$(".main").css("margin-left", "234px");
}else{
	$(".main").css("width", "78%");
	$(".main").css("margin-left", "234px");
}
 
</script>

<div id="hide_botton" style="top:105px;position: fixed;padding:3px;z-index: 99;margin-left:158px;">
    <a onclick="hideLeftMenu()" class="hide_botton">&lt;</a>
</div>
<div id="show_botton" class="show_botton">
    <a onclick="showLeftMenu()">&gt;</a>
</div>
	<!--二级导航-->
<div class="left" id="left_menu">

<div class="left_menu">
<ul class="ce">
     <li class="hide_botton_slide"></li>
     <li class="show_botton_slide"></li>
    	<c:forEach items="${sessionScope.secondMenus }" var="secondMenu" varStatus="itemStatus">
    		<c:choose>
    		<c:when test="${not empty secondMenu.subMenus }">
    		
    		<li id="secondMenu${secondMenu.id}" name="secondMenu"  class="second-menu" ><a class="xz" href="javascript:void(0);" onclick="clickShowOrHide('${secondMenu.id}');">
    		<img id="thirdimg${secondMenu.id}" name="thirdimg" class="more"
    			src="${ctx }/images/system/more_close.png"
    		/>${secondMenu.menuName}
    		</a>
    				<ul class="er"  id="third${secondMenu.id}" name="third" style="display:none;">
	    				<c:forEach items="${secondMenu.subMenus}" var="thirdMenu" varStatus="itemStatus">
	    				<li class="third_sp"></li>
	    					<li id="thirdMenu${thirdMenu.id}" name="thirdMenu" class="three-menu">
	    					<span id="thirdMenuSpan${thirdMenu.id}" name="thirdMenuSpan" class="three-menu-selected-point">●</span>
	    					<a href="javascript:void(0);" onclick="clickThirdMenu('${thirdMenu.parentId}' , '${thirdMenu.id}' , '${thirdMenu.locationURL}');">${thirdMenu.menuName}</a>
	    					<img id="thirdMenuImg${thirdMenu.id}" name="thirdMenuImg" style="display: none;" class="three-menu-selected-img" src="${ctx }/images/system/sijiao.png"/>
	    					</li>
	    				</c:forEach>
	    				<li class="third_sp"></li>
    				</ul>
    			</li>
    		</c:when>
                    <c:otherwise>
                        <li id="secondMenu${secondMenu.id}" name="secondMenu" class="second-menu"><a onclick="clickSecondMenu('${secondMenu.id}' , '${secondMenu.locationURL}');">
                                ${secondMenu.menuName} </a> 
                                <c:if test="${secondMenu.id == shopApplyId}">
                                    <c:if test="${numberOfApplying != 0}">
                                        <div id="unRead" class="unRead" style="margin-left: 140px; margin-top: -30px; line-height: 22px;">${numberOfApplying}</div>
                                    </c:if>
                                </c:if>
                                 <c:if test="${secondMenu.id == ownerApplyId}">
                                    <c:if test="${numberOfOwnerApplying != 0}">
                                        <div id="unReading" class="unRead" style="margin-left: 140px; margin-top: -30px; line-height: 22px;">${numberOfOwnerApplying}</div>
                                    </c:if>
                                </c:if>
                            </li>
                    </c:otherwise>
                </c:choose>
    	
    	</c:forEach>

</ul>
</div>
</div>

<script type="text/javascript">
$(document).ready(
		  function() { 
		      //$(".ce").niceScroll();
			  //$(".ce").getNiceScroll().hide();

		  }

		);
</script>